<default-header class="top-header"></default-header>
<div class="wrap no-sidebar">
  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
    <navbar-utility-mobile></navbar-utility-mobile>
  </div>
  <div class="middle">
    <!-- Middle section -->
    <div class="middle-section surface-shaded">
      <div class="middle-container has-scroll">
        <div class="middle-content">
          <div class="container surface-shaded gutter-top">
            <div class="col-md-12">
              <h1 style="margin-bottom: 5px;">Edit Project {{project.metadata.name}}</h1>
              <div class="help-block mar-bottom-lg">Update the display name and description of your project. The project's unique name cannot be modified.</div>
              <alerts alerts="alerts"></alerts>
              <form name="editProjectForm">
                <fieldset ng-disabled="disableInputs">
                  <div class="form-group">
                    <label for="displayName">Display Name</label>
                    <input class="form-control input-lg"
                        name="displayName"
                        id="displayName"
                        placeholder="My Project"
                        type="text"
                        ng-model="editableFields.displayName">
                  </div>

                  <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control input-lg"
                        name="description"
                        id="description"
                        placeholder="A short description."
                        ng-model="editableFields.description"></textarea>
                  </div>

                  <div class="button-group">
                    <button type="submit"
                        class="btn btn-primary btn-lg"
                        ng-click="update()"
                        ng-disabled="editProjectForm.$invalid || disableInputs"
                        value="">Save</button>
                    <a class="btn btn-default btn-lg" href="#" back>Cancel</a>
                  </div>
                </fieldset>
              </form>
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
